/******************************
 * @Developer: many
 * @File: index_html.go
 * @Time: 2022/4/28 11:14
******************************/

package html

const IndexHtml = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间</title>
    <style>
        input {
            color: #d1cdc7;
            width: 200px;
            outline: none;
            padding: 8px 3px;
            background: none;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 18px;
        }

        button {
            border: none;
            color: #aaa;
            background-color: transparent;
        }

        button:hover {
            color: #fff;
        }

        div button:active {
            color: #aaa;
        }
    </style>
</head>
<body style="background: #181a1b; color: #d1cdc7">
<div style="margin:auto; width: 900px; background: black; padding: 50px">
    <div style="display: flex; flex-direction: column">
        <h3 style="margin: 0">时间戳工具</h3>
        <hr style="width: 100%">

        <div style="align-self: center">
            <h4 id="new-time">当前时间：2022-04-28 15:31:45</h4>
        </div>

        <div style="align-self: center; height: 38px">
            <label style="float: left">
                <input type="text" id="time-unix">
            </label>

            <div style="float: left; color: #aaa">
                <button style="display: block; width: 80px" onclick="unix2date()">时间 >></button>
                <button style="display: block; width: 80px" onclick="date2unix()"><< 时间戳</button>
            </div>

            <label style="float: left">
                <input type="text" id="time-date">
            </label>
        </div>
    </div>
    <div style="display: flex; flex-direction: column">
        <h3 style="margin: 60px 0 0 0">服务器时间</h3>
        <hr style="width: 100%; margin-bottom: 25px">
        <div style="align-self: center">
            <label for="server-time">服务器时间：</label>
            <input type="text" value="{{ . }}" id="server-time">
            <button style="height:30px; border-radius: 3px; background: #296292; margin-left: 25px" onclick="update()">修改</button>
            <button style="height:30px; border-radius: 3px; background: #296292; margin-left: 15px" onclick="ntpdate()">同步时间</button>
        </div>
    </div>
</div>
<div id="layer-window"
     style="
         position: absolute;
         top:calc(50% - 15px);
         left: calc(50% - 100px);

         width: 200px;
         height: 30px;

         line-height: 30px;
         text-align: center;

         display: none;
         background: #333;
         border: #ccc solid 1px;
"></div>
<script>
    Date.prototype.format = function (fmt) {
        let o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (let k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }

        return fmt;
    }

    function date2unix() {
        document.getElementById("time-unix").value = Date.parse(document.getElementById("time-date").value) / 1000
    }

    function unix2date() {
        document.getElementById("time-date").value = new Date(document.getElementById("time-unix").value * 1000).format("yyyy-MM-dd hh:mm:ss")
    }

    window.onload = function () {
        let date = new Date();
        document.getElementById("time-unix").value = Math.round(date / 1000)
        document.getElementById("time-date").value = date.format("yyyy-MM-dd hh:mm:ss")
        document.getElementById("new-time").innerHTML = "当前时间：" + date.format("yyyy-MM-dd hh:mm:ss")

        setInterval(function () {
            let date = new Date();
            document.getElementById("new-time").innerHTML = "当前时间：" + date.format("yyyy-MM-dd hh:mm:ss")
        }, 1000)
    }

    function LayerWindow(intr) {
        let lbox = document.getElementById("layer-window")
        lbox.innerHTML = intr
        lbox.style.display = "block"
        let timer = setInterval(function () {
            clearInterval(timer)
            lbox.style.display = "none"
        }, 1500)
    }

    function update() {
        let client = new XMLHttpRequest()

        let val = document.getElementById("server-time").value
        client.open("get", "/update?nt=" + Date.parse(val) / 1000)
        client.onload = function (response) {
            LayerWindow(response.target.responseText)
        }
        client.send()
    }

    function ntpdate() {
        let client = new XMLHttpRequest()

        client.open("get", "/ntpdate")
        client.onload = function (response) {
            LayerWindow(response.target.responseText)
            if (response.target.status === 200) {
                let nt = response.target.getResponseHeader("Server-Now-Time")
                document.getElementById("server-time").value = new Date(nt * 1000).format("yyyy-MM-dd hh:mm:ss")
            }
        }
        client.send()
    }
</script>
</body>

</html>`
